<template>
  <scroll-view class="my-exer">
    <view class="reload" @click="clear">
      <uni-icons type="loop"></uni-icons>
      <text>重置</text>
    </view>
    <uni-popup ref="popup" type="dialog" class="fontContentpopup">
      <!-- 弹窗内容 -->
      <uni-popup-dialog @close="closefn" @confirm="confirm" title="重新练习">
        <!-- 下拉框选择反馈类型 -->
        清空所有练习信息
      </uni-popup-dialog>
    </uni-popup>
    <uni-popup ref="popup1" type="dialog" class="fontContentpopup">
      <!-- 弹窗内容 -->
      <uni-popup-dialog @close="closefn1" @confirm="confirmClear" title="重新练习">
        <!-- 下拉框选择反馈类型 -->
        清空该题库练习信息
      </uni-popup-dialog>
    </uni-popup>
    <uni-list :border="false">
      <uni-list-item
        :border="false"
        class="card"
        :note="
          '  总题数:   ' +
          myExer.questionNum +
          '  &nbsp&nbsp已答题:   ' +
          myExer.finishTotal +
          ''
        "
        :title="myExer.name"
        :showArrow="false"
        clickable
        v-for="myExer in listpage.list"
        :key="myExer.id"
      >
	  <template v-slot:footer>
		  <view>
			  <text class="textClear" @click="clearItem(myExer)">重新练习</text>
			  <text @click="toExer(myExer)" class="textIn">继续练习</text>
		  </view>
	  </template>
	  </uni-list-item>
    </uni-list>
  </scroll-view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { MyExer } from "@/ts";
import http from "@/utils/request";
import { noticStore } from "@/stores/notic";

// 定义变量
const options = reactive([
  {
    text: "取消",
    style: {
      backgroundColor: "#007aff",
    },
  },
  {
    text: "确认",
    style: {
      backgroundColor: "#dd524d",
    },
  },
]);
const popup = ref(null);
const popup1 = ref(null);
const queryForm = reactive({
  // 查询表单
  name: "", // 名称
});
const noticFn = noticStore();
const listpage = reactive({
  list: [
    {
      type: 1,
      name: "单选题",
      questionNum: 0,
      finishTotal: 0,
    },
    {
      type: 2,
      name: "多选题",
      questionNum: 0,
      finishTotal: 0,
    },
    {
      type: 4,
      name: "判断题",
      questionNum: 0,
      finishTotal: 0,
    },
  ],
});

onShow(async () => {
  query();
});
/**
 * 查询
 *
 * @param append 追加数据
 */
async function query() {
  listpage.status = "loading";

  const { code, data } = await http.post("myExer/myQuestionTypeNum", {
    ...queryForm,
  });

  if (code !== 200) {
    return;
  }
  // data是一个数组，数组中是对象，对象中type为1，表示是单选，type为2，表示是多选，type为4，表示是判断
  getmyExerInfo(data);
}
const getmyExerInfo = async (data) => {
  if (noticFn.baseExerInfo.length == 0) {
    let { data, code } = await http.post("exmMyExer/get", { type: 1 });
    if (code == 200) {
      try {
        noticFn.baseExerInfo = JSON.parse(data);
      } catch (error) {
        console.error("解析 JSON 数据出错：", error);
        // 在解析失败时进行处理，例如给出错误提示、记录日志等
      }
    }
  }
  data.forEach((item: any) => {
    // 遍历数组，找到对应的type，然后修改对应的questionNum
    const index = listpage.list.findIndex((obj: any) => obj.type === item.type);
    if (index !== -1) {
      listpage.list[index].questionNum = item.questionNum;
    }
    noticFn.baseExerInfo.forEach((cacheItem) => {
      if (cacheItem.id == item.type) {
		  console.info(cacheItem.questions.length);
        listpage.list[index].finishTotal = cacheItem.questions.length;
      }
    });
  });
};
const clearExer = ref();
const clearItem = async (exer: any) => {
  clearExer.value = exer;
  popup1.value.open();
};
const confirmClear = async () => {
  const exer = clearExer.value;
  let myExerTo = ref();
  
  noticFn.baseExerInfo = noticFn.baseExerInfo.filter((item) => {
    return item.id != exer.type;
  });
  //listpage.list中 answered重置为0
  listpage.list.forEach((item) => {
    if (item.type == exer.type) {
      item.finishTotal = 0;
	  myExerTo.type = item.type;
	  myExerTo.name = item.name;
    }
  });
  let { data } = await http.post("exmMyExer/save", {
    type: 2,
    content: JSON.stringify(noticFn.baseExerInfo),
  });
  toExer(myExerTo);
};
const closefn1 = () => {
  popup1.value.close();
  //清空反馈内容
};
const closefn = () => {
  popup.value.close();
  //清空反馈内容
};
const clear = () => {
  popup.value.open("");
};
// 提交反馈
const confirm = async () => {
  //将字体大小设置存储到本地
  noticFn.baseExerInfo = [];
  let { data } = await http.post("exmMyExer/save", {
    type: 2,
    content: JSON.stringify([]),
  });
  listpage.list.forEach((listItem) => {
    listItem.finishTotal = 0;
  });
  popup.value.close();
};
// 去练习
async function toExer(exer: MyExer) {
  // 跳转到练习页面
  uni.navigateTo({
    url: `/pages/myBase/myBasePage?questionTypeId=${exer.type}&pageTitle=${exer.name}`,
  });
}
</script>

<style lang="scss" scoped>
.my-exer {
  height: 100%;
  .uni-list {
    border: false;
    background: linear-gradient(to bottom, #fff5f5, #f0f0f0);
  }
}
/* 固定高度，超出滚动*/

.list_content {
  height: calc(100vh - 100rpx);
  overflow-y: auto;
}
/* 卡片圆角 阴影效果*/
.card {
  margin-bottom: 15rpx;
  margin-left: 15rpx;
  margin-right: 15rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
}
.test_time {
  height: 60rpx;
  margin: 6rpx;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
}
.test_card_status {
  height: 60rpx;
  margin: 6rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.reload {
  display: block;
  align-items: right;
  text-align: right;
  font-size: 14px;
  color: #666;
  margin: 10px;
}
.textClear {
  border: 1px solid burlywood;
  border-radius: 6px;
  padding: 6px;
  font-size: 14px;
  margin-left: 15px;
  margin-top: 150px;
  color: burlywood;
}
.textIn {
  border: 1px solid blue;
  border-radius: 6px;
  padding: 6px;
  font-size: 14px;
  margin-left: 15px;
  color: blue;
}
</style>
<style scoped>
.uni-list-item /deep/ .uni-list-item__content-title {
  font-size: 16px;
  color: #000;
  font-weight: 500;
}
.uni-list-item /deep/ .uni-list-item__extra-text {
  font-size: 14px;
  color: #000;
  font-weight: 500;
}
.uni-list-item /deep/.uni-list-item__container{
	align-items: center;
}
</style>
